<template>
  <div>
    <el-dialog
      :title="title"
      v-model="state.isShow"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="600px"
      @closed="closed"
    >
      <ul>
        <li class="flex items-center rounded-[6px] mb-[10px]">
          <div class="w-[120px] pl-2 flex item justify-end">
            <span>状态</span>
            <span class="mt-[-1px] mx-[4px]">:</span>
          </div>
          <div class="flex-1 w-0 ml-[15px]">
            <el-radio-group v-model="form.Status">
              <el-radio :value="1" size="large">开启</el-radio>
              <el-radio :value="0" size="large">关闭</el-radio>
            </el-radio-group>
          </div>
        </li>
        <li class="flex items-center rounded-[6px] mb-[10px]">
          <div class="w-[120px] pl-2 flex item justify-end">
            <span>关联活动</span>
            <span class="mt-[-1px] mx-[4px]">:</span>
          </div>
          <div class="flex-1 w-0 ml-[15px]">
            <el-select class="!w-[246px]" v-model="form.Type" placeholder="请选择活动">
              <el-option label="无活动" :value="0" />
              <el-option label="大转盘" :value="1" />
              <el-option label="签到" :value="2" />
              <el-option label="邀请好友" :value="3" />
            </el-select>
          </div>
        </li>
        <li class="flex items-center rounded-[6px] mb-[10px]">
          <div class="w-[120px] pl-2 flex item justify-end">
            <span>排序</span>
            <span class="mt-[-1px] mx-[4px]">:</span>
          </div>
          <div class="flex-1 w-0 ml-[15px]">
            <el-input-number
              v-model="form.Sort"
              class="!w-[246px]"
              :min="0"
              controls-position="right"
            />
          </div>
        </li>
        <li class="flex items-center rounded-[6px] mb-[10px]">
          <div class="w-[120px] pl-2 flex items-center justify-end">
            <span>活动广告图片</span>
            <el-tooltip effect="dark" content="建议尺寸：710*260" placement="top-start">
              <el-icon class="text-primary !text-[16px]"><Warning /></el-icon>
            </el-tooltip>
            <span class="mt-[-3px] mx-[4px]">:</span>
          </div>
          <div class="flex-1 w-0 ml-[15px] overflow-hidden">
            <BannerPreview @delete="form.Img = ''" v-if="form.Img" :src="form.Img" />
            <div v-else class="w-[100px] h-[100px]" v-loading="state.aloading">
              <el-upload
                ref="uploadRef"
                drag
                action="#"
                accept="image/jpeg,image/png,image/jpg"
                :show-file-list="false"
                :multiple="false"
                :limit="1"
                :http-request="UploadImage"
                :before-upload="beforePicUpload"
              >
                <el-icon class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </div>
          </div>
        </li>
      </ul>
      <template #footer>
        <el-button @click="closed">取 消</el-button>
        <el-button
          :disabled="state.updating"
          :loading="state.updating"
          type="primary"
          @click="handleSubmit"
          >确 定</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import BannerPreview from "@/components/banner-preview.vue";
import { reqUploadImg } from "@/api/user";
import { message } from "@/utils/message";
import { reqActivityBannerAdd, reqActivityBannerEdit } from "@/api/activity";

const props = withDefaults(
  defineProps<{
    data: ActivityBannerMo | null;
  }>(),
  {
    data: null
  }
);
const emit = defineEmits(["update"]);
const uploadRef = ref();
const title = computed(() => (props.data ? "编辑轮播图" : "新增轮播图"));
const state = reactive({
  isShow: false,
  aloading: false,
  updating: false
});
const defaultForm = {
  Status: 0,
  Sort: 1,
  Img: "",
  Type: 0
};

const form = reactive({ ...defaultForm });
const closed = () => {
  state.isShow = false;
};
const open = () => {
  if (props.data) {
    Object.assign(form, props.data);
  } else {
    Object.assign(form, defaultForm);
  }
  state.isShow = true;
};

const UploadImage = async (e: any) => {
  try {
    state.aloading = true;
    let params = new FormData();
    params.append("ImgPath", e.file);
    let res = await reqUploadImg(params);
    state.aloading = false;
    form.Img = "/" + res.data.ImgPath;
    uploadRef.value?.clearFiles();
  } catch (error) {
    state.aloading = false;
    uploadRef.value?.clearFiles();
    console.log(error);
  }
};

const beforePicUpload = (file: any) => {
  const isIMAGE = file.type === "image/jpeg" || "image/jpg" || "image/png";
  const isLt200K = file.size / 1024 < 200;

  if (!isIMAGE) {
    message.warning("上传文件只能是图片格式!");
  }
  if (!isLt200K) {
    message.warning("上传头像图片大小不能超过 200KB!");
  }
  return isIMAGE && isLt200K;
};

const handleSubmit = async () => {
  if (!form.Sort && form.Sort != 0) {
    message.warning("请输入排序");
    return;
  }
  if (!form.Img) {
    message.warning("请上传轮播图");
    return;
  }
  state.updating = true;
  try {
    if (props.data) {
      await reqActivityBannerEdit({
        Id: props.data.Id,
        Status: Number(form.Status),
        Sort: Number(form.Sort),
        Img: form.Img,
        Type: Number(form.Type)
      });
    } else {
      await reqActivityBannerAdd({
        Status: Number(form.Status),
        Sort: Number(form.Sort),
        Img: form.Img,
        Type: Number(form.Type)
      });
    }
    message.success(props.data ? "修改轮播图成功" : "添加轮播图成功");
    state.updating = false;
    emit("update");
    setTimeout(() => {
      closed();
    }, 200);
  } catch (error) {
    state.updating = false;
    console.log(error);
  }
};
defineExpose({
  open
});
</script>
<style scoped lang="scss">
:deep() {
  .el-dialog__body {
    padding: 20px;
  }
  .el-input-number .el-input__inner {
    text-align: left !important;
  }
  .el-radio {
    margin-right: 10px !important;
  }
}
</style>
